<!doctype html>
<html lang="zh">
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<title>源码来自：http://www.htmleaf.com/Demo/201605033422.html</title>
		<style>
			/*@import url(https://fonts.googleapis.com/css?family=Righteous);*/
			html,
			body {
				height: 100%;
				margin: 0;
				/*font-family: 'Righteous', sans serif;*/
				color: #ffffff;
				overflow-y: hidden;
				overflow-x: hidden;
			}

			svg {
				position: absolute;
				top: 50%;
				height: 5em;
				width: 5em;
				margin-top: -2.5em;
				cursor: pointer;
			}

			svg#next {
				right: 1em;
			}

			svg#previous {
				display: none;
				left: 1em;
			}

			div.slider {
				display: flex;
				-webkit-display: flex;
				-webkit-align-items: center;
				align-items: center;
				justify-content: center;
				-webkit-justify-content: center;
				width: 100%;
				height: 100%;
				position: absolute;
				transition: all 1s ease;
				-moz-transition: all 1s ease;
				-ms-transition: all 1s ease;
				-webkit-transition: all 1s ease;
				-o-transition: all 1s ease;
			}

			div.slider h1 {
				font-size: 2em;
				width: 100%;
				text-align: center;
			}

			.zoomout {
				transform: scale(0.7);
				-moz-transform: scale(0.7);
				-webkit-transform: scale(0.7);
				-o-transform: scale(0.7);
				-ms-transform: scale(0.7);
			}

			.one {
				background-color: #63E89D;
			}

			.two {
				background-color: #65BEFF;
			}

			.three {
				background-color: #EF4264;
			}

			.four {
				background-color: #8F70FD;
			}
		</style>
	</head>
	<body>
		<div class="htmleaf-container">
			<div class="slider two">
				<img
					src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/6.png">
			</div>
			<div class="slider three">
				<img
					src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/7.png">
			</div>
			<div class="slider four">
				<div class="related">
					<h3>如果你喜欢这个插件，那么你可能也喜欢:</h3>
					<a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201604133333.html">
						<img src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/6.png"
							width="300" alt="jQuery和CSS3交叉滑动幻灯片特效插件" />
						<h3>jQuery和CSS3交叉滑动幻灯片特效插件</h3>
					</a>
					<a href="http://www.htmleaf.com/jQuery/Slideshow-Scroller/201603253262.html">
						<img src="https://gitee.com/susuhhhhhh/su-sus-picture/raw/master/%E5%A5%BD%E7%9C%8B%E5%9B%BE%E7%89%87/6.png"
							width="300" alt="hslider.js-简洁的响应式全屏宽度jQuery幻灯片插件" />
						<h3>hslider.js-简洁的响应式全屏宽度jQuery幻灯片插件</h3>
					</a>
				</div>
			</div>
			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				enable-background="new 0 0 32 32" id="previous" version="1.1" viewBox="0 0 32 32" xml:space="preserve">
				<path
					d="M7.701,14.276l9.586-9.585c0.879-0.878,2.317-0.878,3.195,0l0.801,0.8c0.878,0.877,0.878,2.316,0,3.194  L13.968,16l7.315,7.315c0.878,0.878,0.878,2.317,0,3.194l-0.801,0.8c-0.878,0.879-2.316,0.879-3.195,0l-9.586-9.587  C7.229,17.252,7.02,16.62,7.054,16C7.02,15.38,7.229,14.748,7.701,14.276z"
					fill="#FFFFFF" />
			</svg>

			<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"
				enable-background="new 0 0 32 32" id="next" version="1.1" viewBox="0 0 32 32" xml:space="preserve">
				<path
					d="M24.291,14.276L14.705,4.69c-0.878-0.878-2.317-0.878-3.195,0l-0.8,0.8c-0.878,0.877-0.878,2.316,0,3.194  L18.024,16l-7.315,7.315c-0.878,0.878-0.878,2.317,0,3.194l0.8,0.8c0.878,0.879,2.317,0.879,3.195,0l9.586-9.587  c0.472-0.471,0.682-1.103,0.647-1.723C24.973,15.38,24.763,14.748,24.291,14.276z"
					fill="#FFFFFF" />
			</svg>
		</div>

		</div>

		<script src="http://cdn.bootcss.com/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
		<script type="text/javascript">
			var timer = 0;
			var elementCount = 0;
			var firstPos = 0;
			var lastPos = 0;

			$(function() {
				initialiseSlider();
				$("#next").click(function() {
					slideRight();
				});

				$("#previous").click(function() {
					slideLeft();
				});
			});

			function initialiseSlider() {
				$("div.slider").each(function(value) {
					elementCount += 1;
					var position = -100 * value;
					$(this).css("left", position + "%");
				});

				if (elementCount === 1)
					$("#next").hide();
			}

			function slideRight() {
				$("div.slider").each(function(value) {
					$(this).addClass("zoomout");
					var position = parseInt($(this)[0].style.left) + 100;

					if (value === 0)
						firstPos = position;

					$(this).css("left", position + "%");
					timer = setTimeout(removeZoom, 1000);
				});

				console.log(firstPos);

				if (firstPos !== ((elementCount - 1) * 100)) {
					$("#next").show();
					$("#previous").show();
				} else
					$("#next").hide();
			}

			function slideLeft() {
				$("div.slider").each(function(value) {
					$(this).addClass("zoomout");
		 		var position = parseInt($(this)[0].style.left) - 100;

					if (value === (elementCount - 1))
						lastPos = position;

					$(this).css("left", position + "%");
					timer = setTimeout(removeZoom, 1000);
				});

				console.log(lastPos);

				if (lastPos !== ((elementCount - 1) * -100)) {
					$("#previous").show();
					$("#next").show();
				} else
					$("#previous").hide();
			}

			function removeZoom() {
				$("div.slider").each(function() {
					$(this).removeClass("zoomout");
				});
			}
		</script>
	</body>
</html>
